<template>
<section class="wrap">
<main>
<div>
 <el-menu
    class="containerer"
 >

 <el-submenu index="1">
<template slot="title">
    <h3>巅峰榜</h3>
</template>
<el-menu-item-group>
 <el-menu-item index="1-1">
    <h3>热歌榜</h3>
 </el-menu-item>
 <el-menu-item index="1-2">
    <h3>新歌榜</h3>
 </el-menu-item>
 <el-menu-item index="4">
    <h3>流行指数榜</h3>
</el-menu-item>
<el-menu-item index="5">
<h3>腾讯音乐人原创榜</h3>
 </el-menu-item>
 <el-menu-item index="6">
<h3>听歌识曲榜</h3>
 </el-menu-item>

 <el-menu-item index="5">
    <h3>MV榜</h3>
 </el-menu-item>

</el-menu-item-group>
</el-submenu>
<el-submenu index="2">
    <template slot="title">
    <h3>地区榜</h3>
</template>
<el-menu-item-group>
 
 <el-menu-item index="2-1">
    <h3>内地榜</h3>
 </el-menu-item>
 <el-menu-item index="2-3">
    <h3>香港地区榜</h3>
 </el-menu-item>
 <el-menu-item index="2-2">
    <h3>台湾地区榜</h3>
</el-menu-item>
<el-menu-item index="5">
<h3>欧美榜</h3>
 </el-menu-item>
 <el-menu-item index="6">
<h3>韩国榜</h3>
 </el-menu-item>
 <el-menu-item index="7">
    <h3>日本榜</h3>
 </el-menu-item>
 <el-menu-item index="8">
    <h3>JOOX本地热播榜</h3>
 </el-menu-item>
 <el-menu-item index="9">
    <h3>香港TVB劲歌金榜</h3>
 </el-menu-item>
 <el-menu-item index="10">
    <h3>台湾KKBOX榜</h3>
 </el-menu-item>
</el-menu-item-group>
</el-submenu>

<el-submenu index="3">
    <template slot="title">
    <h3>特色榜</h3>
    </template>
<el-menu-item-group>
 <el-menu-item index="2">
    <h3>网络歌曲榜</h3>
 </el-menu-item>
 <el-menu-item index="3">
    <h3>DJ舞曲榜</h3>
 </el-menu-item>
 <el-menu-item index="4">
    <h3>抖音快手榜</h3>
</el-menu-item>
<el-menu-item index="5">
<h3>综艺新歌榜</h3>
 </el-menu-item>
 <el-menu-item index="6">
<h3>电音榜</h3>
 </el-menu-item>
 <el-menu-item index="7">
    <h3>影视金曲榜</h3>
 </el-menu-item>
 <el-menu-item index="8">
    <h3>国风热歌榜</h3>
 </el-menu-item>
 <el-menu-item index="9">
    <h3>说唱榜</h3>
 </el-menu-item>
 <el-menu-item index="10">
    <h3>动漫音乐榜</h3>
 </el-menu-item>
 <el-menu-item index="11">
    <h3>游戏音乐榜</h3>
 </el-menu-item>
 <el-menu-item index="12">
    <h3>K歌金曲榜</h3>
 </el-menu-item>
</el-menu-item-group>
</el-submenu>

<el-submenu index='4'>
    <template slot="title">
    <h3>全球榜</h3>
    </template>
<el-menu-item-group>
 <el-menu-item index="2">
    <h3>美国公告榜</h3>
 </el-menu-item>
 <el-menu-item index="3">
    <h3>韩国Melon榜</h3>
 </el-menu-item>
 <el-menu-item index="4">
    <h3>英国UK榜</h3>
</el-menu-item>
<el-menu-item index="5">
<h3>日本公信榜</h3>
 </el-menu-item>
 <el-menu-item index="6">
<h3>YouTube音乐排行榜</h3>
 </el-menu-item>

</el-menu-item-group>
</el-submenu>


</el-menu>


<div class="mod_toplist">
   <div class="toplist_hd">
      <h1 class="toplist_tit">流行指数榜</h1>
      <span class="toplist_switch_data">
         <span class="toplist_switch_data">2024-01-10</span>
      </span>
      <a class="toplist_rule">榜单规则</a>
   </div>
   <div class="mod_songlist_toolbar">
      <a class="mod_btn mod_btn_green">
         <i class="icon_play"></i>
         播放全部
      </a>
      <a class="mod_btn">
         <i class="icon_add"> </i>
         添加到
      </a>
      <a class="mod_btn">
         <i class="icon_download"></i>
         下载
      </a>
      <a class="mod_btn">
         <i class="icon_batch"></i>
         批量操作
      </a>
      <a class="mod_btn">
         <i class="icon_comment"></i>
         评论(25754)
      </a>
   </div>
</div>

<div class="toplist_mod_songlist">
   <ul class="songlist_header">
      <li class="songlist_header_name">歌曲</li>
      <li class="songlist_header_author">歌手</li>
      <li class="songlist_header_time">时长</li>
   </ul>
   <ul class="songlist_list">
      <li v-for="(item,index) in nums" :key="index">
         <div class="songlist_item">
         <div class="songlist_number">{{ index+1 }}</div>
         <div class="songlist_rank">
            <i class="icon_rank_popular"></i>
            230%
         </div>
         <div class="songlist_songname">
            <a href="#" class="songlist_icon songlist_icon_nv">
               <span class="icon_txt">MV</span>
            </a>
            <i class="songlist_icon songlist_icon_vip" title="VIP"></i>
            <span class="songlist_songname_txt">
               <a href="#" class="songlist_cover" title="执迷不悔">
                  <img :src="require('@/assets/XinDiePage/1.png')" class="songlist_pic">
               </a>
               <a title="执迷不悔">执迷不悔（国语）</a>
            </span>
            <div class="mod_list_menu">
               <a class="list_menu_item list_menu_play" title="播放">
                  <i class="list_menu_icon_play"></i>
                  <span class="icon_txt">播放</span>
               </a>
               <a class="list_menu_item list_menu_add" title="添加到歌单">
                  <i class="list_menu_icon_add"></i>
                  <span class="icon_txt">添加到歌单</span>
               </a>
            </div>
         </div>
         <div class="songlist_artist">
               <a href="#" class="playlist_author" title="王菲">
                  王菲
               </a>
            </div>
            <div class="songlist_time">04:27</div>
         </div>
      </li>
   </ul>
</div>
<div class="client_guide">
   <p class="client_guide_txt"> 查看更多内容请下载客户端</p>
   <a href="#" class="client_guide_btn">立即下载</a>
</div>

</div>
</main>
</section>
</template>

<script>
    export default{
        name:"PaiHangBangPage",
        data(){
         return{
            nums:20
         }
        }
    }
</script>
<style scoped>
   .client_guide{
      position: relative;
      left: 200px;
      width: 990px;
      top: -200px;
   }
   .client_guide_txt{
     
      text-align: center;
   }
   .client_guide_btn{
      display: block;
      margin: 20px auto 0;
      width: 175px;
      height: 41px;
      line-height: 41px;
      font-size: 16px;
      color: #fff;
      text-align: center;
      border-radius: 41px;
      background-color: #31c27c;
   }
   .songlist_pic{
      width: 60px;
      height: 60px;
      display: block;
      border: 0;
      image-rendering: optimizeQuality;
   }
.toplist_mod_songlist{
   position: relative;
   /* top: -180px; */
   left: 200px;
   width: 990px;
   margin-bottom: 60px;
}
   .songlist_header_time{
      position: absolute;
      top: 0;
      right: 38px;
      width: 50px;
      list-style: none;
   }
   .songlist_artist{
      line-height: 80px;
      height: 80px;
      float: left;
      padding-left: 15px;
      width:25.5%;
      box-sizing: border-box;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
   }
   .songlist_time{
      line-height:80px;
      height: 80px;
      color: #999;
      position:absolute;
      top:0;
      right:38px;
      width:50px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 14px;
   }
   .list_menu_icon_play{
      background-image: url('@/assets/paihangbang_bg/icon_list_menu.png');
      background-position: 0 0;
      display: block;
      width: 36px;
      height: 36px;
      background-repeat: no-repeat;
   }
   .list_menu_item.list_menu_play{
      display: inline-block;
      margin-right: 10px;
      vertical-align: top;
      text-decoration:none;
   }
   .mod_list_menu{
      position:absolute;
      right: -10px;
      top:50%;
      overflow: hidden;
      opacity: 0;
      pointer-events:none;
      height: 36px;
   }
   .songlist_cover{
      width: 70px;
      height: 70px;
      float: left;
      margin-right: 20px;
      margin-top: 5px;
      text-decoration: none;
      color: #000;
      font-size: 14px;
   }
   .songlist_songname_txt{
      max-width: 62%;
      box-sizing: border-box;
      float: left;
      overflow: ellipsis;
      margin-right: 8px;
      white-space: nowrap;
      font-size: 14px;
   }
   .songlist_header_name{
      width: 72%;
      float:left;
      position: relative;
      white-space: normal;
      list-style: none;
   }
   .songlist_icon.songlist_icon_vip{
      background-image: url('@/assets/paihangbang_bg/paihangbang_page.png');
      background-position: -80px -160px;
      display: inline-block;
      width:34px;
      height: 16px;
      vertical-align: middle;
      margin-right: 6px;
   }
   .icon_txt{
      font:0/0 a;
   }
   .songlist_icon{
      display: inline-block;
      width:33px;
      height: 16px;
      background-image: url('@/assets/paihangbang_bg/paihangbang_page.png');
      background-position:-40px -280px;
      vertical-align: middle;
      margin-right: 6px;
      text-decoration: none;
      color: #000;
      cursor:pointer;
   }
   .songlist_songname{
      width: 72%;
      line-height: 80px;
      height: 80px;
      float: left;
      position:relative;
      white-space: normal;
   }
   .songlist_header_author{
      float:left;
      padding-left: 15px;
      width:25.5%;
      box-sizing: border-box;
      list-style: none;
   }
   .songlist_header{
      padding-left: 122px;
      line-height: 50px;
      height: 50px;
      background-color:rgba(0,0,0,.01) ;
      color: #999;
      position:relative;
      padding-right: 95px;
   }
   .icon_rank_popular{
      width: 15px;
      height: 15px;
      margin-top:27px;
      background-position: 0 -60px;
      display: block;
      margin-left: auto;
      margin-right: auto;
      background-image: url('@/assets/paihangbang_bg/icon_rank.png');
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      color: #999;
   }
   .songlist_rank{
      position: absolute;
      top:0;
      left: 48px;
      width: 72px;
      font-size: 12px;
      line-height: 20px;
      text-align: center;
      color:#999;
      height: 80px;
   }
   .songlist_number{
      color: #ff4222;
      width: 40px;
      top: 2px;
      left: 0;
      text-align: right;
      font-size: 24px;
      position:absolute;
      line-height: 80px;
      height: 80px;
   }
   .songlist_item{
      height: 80px;
      padding-left: 122px;
      clear:both;
      overflow: hidden;
      position:relative;
      padding-right: 95px;
   }
   .songlist_list{
      overflow: hidden;
      clear:both;
      margin:0;
      padding:0;
      font-size:14px;
   }
   .mod_songlist_toolbar{
      white-space: nowrap;
   }
   .toplist_switch_data{
      font-size:14px;
      line-height:64px;
   }
   .toplist_tit{
     float:left;
     font-weight: 400;
     font-size: 24px;
     margin-right: 15px;
   }
   .mod_btn.mod_btn_green{
      background-color:#31c27c;
   }
   .icon_comment{
      background-position:-140px -120px;

   }
   .icon_batch{
      background-position:-120px 0;
   }
   .icon_download{
      background-position:-40px -220px;

   }
   .icon_add{
      background-position:-20px 0;
   }
   .icon_play{
      background-position:-80px -220px;
   }
   .icon_play,.icon_add,.icon_download,.icon_batch,.icon_comment{
      width:16px;
      height:16px;
      background-image:url('@/assets/paihangbang_bg/paihangbang_page.png');
      vertical-align:-3px;
      display:inline-block;
      margin-right:6px;
      background-repeat:no-repeat;
   }
   .mod_btn{
      cursor:pointer;
      min-width:122px;
      text-align:center;
      border:1px solid #c9c9c9;
      color:#000;
      border-radius: 2px;
      font-size: 14px;
      margin-right: 6px;
      padding: 0 23px;
      height: 38px;
      line-height: 38px;
      display: inline-block;
      white-space: nowrap;
      box-sizing: border-box;
      overflow: hidden;
   }
   .toplist_hd{

      height:64px;
      margin-bottom:10px;
   }
   
   .mod_toplist{
      position: relative;
      top: 10px;
      left: 200px;
   }
   .mod_songlist_toolbar{
      position:relative;
      margin-bottom:20px;
      /* font-size:0; */
   }
    .el-menu-item.is-active{    
        color:#fff;
        background-color:#31c27c;
    }
    .containerer{
      position: absolute;
        width:178px;
        border: 1px solid hsla(0,0%,60%,.2);
        font-size:14px;
    }
    main{
      max-width: 1200px;
      position: relative;
      margin: 0 auto;
    }
    .wrap{
      /* max-width:1200px; */
   
    }
</style>